<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>创建协议</span>
        <span style="color: crimson;font-size: 16px;display: block">温馨提示：每项协议类型最多只能添加三份协议</span>
      </div>
      <el-form :model="form" ref="form" :rules="rules" label-width="130px">
        <el-form-item label="协议标题" prop="agreementTitle">
          <el-input v-model="form.agreementTitle" palceholder="请输入协议标题" style="width: 300px"/>
        </el-form-item>
        <el-form-item label="协议类型" prop="agreementType">
          <el-select v-model="form.agreementType" placeholder="请选择">
            <el-option
              v-for="item in agreementTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否立即开启" prop="agreementState">
          <el-radio-group v-model="form.agreementState" size="small">
            <el-radio label="C_YES" border>开启</el-radio>
            <el-radio label="C_NO" border>关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="协议内容" prop="agreementContent">
          <editor :value.sync="form.agreementConent"></editor><el-button style="margin-top: 10px" @click="saveContent"  v-loading.fullscreen.lock="fullscreenLoading">保存文档</el-button><span style="margin-left: 5px; color: brown">*文档填写后，请先点击保存文档</span>
        </el-form-item>
        <el-form-item>
          <el-button type="shendaPrimary" size="small" @click="toBack" icon="el-icon-back">返回</el-button>
          <el-button type="primary" size="small" @click="onSubmit('form')" v-preventReClick icon="el-icon-s-promotion">保存</el-button>
          <el-button type="shendaPrimary" size="small" @click="resetForm('form')" icon="el-icon-refresh-right">重置</el-button>
<!--          <el-button type="success" size="small" @click="showPreviewDialog = true">预览</el-button>-->
        </el-form-item>

      </el-form>
    </el-card>
    <el-dialog :visible.sync="showPreviewDialog" center width="80%" top="10%" :title="form.agreementTitle" append-to-body>
      <div v-html="form.agreementConent"></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showPreviewDialog = false">关闭预览</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="showTipDialog" center width="500px" top="10%" title="保存协议" :append-to-body="true">
      <div v-html="tipText"></div>
      <div style="padding-left: 20px"><el-checkbox v-model="checked" style="color: crimson">我已确认以上内容准确无误</el-checkbox></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showTipDialog = false">关闭</el-button>
        <el-button @click="onSubmitAgain" type="primary" >提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { saveAgreement,uploadUserPicture } from '@/api/getData'
import Editor from "@/components/Editor";
var qiniu = require("qiniu-js");
var imgUrl = localStorage.getItem("image");
export default {
  name: '',
  data(){
    return{
      form: {
        agreementTitle: '',
        agreementType: '',
        agreementState: 'C_YES',
        agreementConent: '',
      },
      rules: {
        agreementTitle: [{required: true, message: '请填写协议标题', trigger: 'blur'},{ min: 4,max: 15, message: '标题长度4-15位' }],
        agreementType: [{required: true, message: '请选择协议类型', trigger: 'change'}],
        agreementState: [{required: true, message: '请选择协议提交后状态', trigger: 'change'}],
        agreementConent: [{required: true, message: '请填写协议内容', trigger: 'change'}],
      },
      agreementTypeOptions: [
        { value: '', label: '请选择' },
        { value: 'LOGIN', label: '登录协议' },
        { value: 'C_APP', label: 'C端协议' },
        { value: 'AGENT', label: '代理协议' },
      ],
      showPreviewDialog: false,
      showTipDialog: false,
      tipText: '',
      checked: false,
      fullscreenLoading: false,
    }
  },
  components: {
    Editor
  },

  methods:{
    onSubmit(form){
      console.log()
      if(this.form.agreementConent==''||this.form.agreementConent=='<p><br></p>'){
        this.$alert('系统当前暂未检测到您的协议内容，若您已填写协议内容，请再次点击“保存文档”后提交数据', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            return false;
          }
        });
        return false;
      }
      this.$refs[form].validate(valid=>{
        if(valid){
          switch(this.form.agreementState){
            case 'C_YES':
              this.tipText = '<h2 style="color: crimson;margin-left: 20px">※ 高风险操作 请核对内容 ※</h2><ul style="font-size: 18px;line-height: 30px;letter-spacing: 1px"><li style="color: crimson;font-weight: bold">协议提交后不可修改，不可删除，</li> <li>开启后您的所有用户可浏览协议内容</li></ul>';
              break;
            case 'C_NO':
              this.tipText = '<h2 style="color: crimson;margin-left: 20px">※ 高风险操作 请核对内容 ※</h2><ul style="font-size: 18px;line-height: 30px;letter-spacing: 1px"><li style="color: crimson;font-weight: bold">协议提交后不可修改，不可删除，</li> <li>您当前选择暂不开启协议,暂不向用户展示</li></ul>';
              break;
          }
          this.checked = false;
          this.showTipDialog = true;
        }
        else {
          this.$message.error('请按页面提示修改表单错误信息')
        }
      })
    },
    //二次确认协议弹窗
    async onSubmitAgain(){
      this.pagekey = await this.$getPageKey();
      if(this.checked){
        this.$confirm('您是否已确认协议内容准确无误，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.showTipDialog = false;
          this.submitForm();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消当前操作'
          });
        });
      }
      else{
        this.$message.error('请确认信息后，勾选我已确认！');
        return false;
      }
    },
    //表单提交
    async submitForm(){
      let returnData = await saveAgreement({
        title: this.form.agreementTitle,
        content: this.form.agreementConent,
        dictType: this.form.agreementType,
        dictState: this.form.agreementState,
        pagekey: this.pagekey
      })
      if(returnData._result){
        if(returnData.code==10000){
          this.$message({
            type: 'success',
            message: '当前协议提交成功!'
          });
          this.toBack();
        }
      }
    },
    saveContent(){
      const loading = this.$loading({
        lock: true,
        text: '文档保存中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
    /*// 图片上传-选择图片
    checkFile(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("图片大小不能超过 2MB!");
        return false;
      }
      return true;
    },
    // 图片上传-成功事件
    handleAvatarSuccess: function(res, file) {
      // this.saveInfo.picUrl = this.upload_qiniu_addr + res.key;
      this.$message({
        type: 'success',
        message: '图片上传成功'
      })
      // console.log(this.saveInfo.picUrl)
    },
    // 图片上传-失败事件
    handleError: function(res) {
      this.$message({
        message: "上传失败",
        duration: 2000,
        type: "warning"
      });
    },
    // 图片上传-接口
    async beforeUpload(file) {
      if (!this.checkFile(file)) {
        return false;
      }
      let tk = await uploadUserPicture({ uploadType: 1 });
      this.qiniuData = tk.data;
    },*/

    resetForm(form){
      this.form.agreementConent = '';
      this.$refs[form].resetFields();

    },
    toBack() {
      this.$router.back(-1)
    }
  }
}
</script>
<style scoped>
.box-card {
  width: 900px;
}
</style>
